<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>兄弟组件传值</title>
</head>

<body>
    <div id="app">
        <div>父组件</div>
        <div>
            <button @click='handle'>销毁事件</button>
        </div>
        <component-a></component-a>
        <component-b></component-b>
    </div>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
        兄弟组件之间数据传递
        */
        //1、 提供事件中心
        var hub = new Vue();

        Vue.component('component-a', {
            data: function () {
                return {
                    num: 0
                }
            },
            template: `
            <div>
                <div>com-A: {{num}}</div>
                <div>
                    <button @click='handle'>点击</button>
                </div>
            </div>
            `,
            methods: {
                handle: function () {
                    //2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)   触发兄弟组件的事件
                    hub.$emit('b-event', 1);
                }
            },
            mounted: function () {
                // 3、接收数据方，通过mounted(){} 钩子中  触发hub.$on(方法名
                hub.$on('a-event', (val) => {
                    console.log('执行了 a-event');
                    this.num += val;
                });
            },

        });

        Vue.component('component-b', {
            data: function () {
                return {
                    num: 0
                }
            },
            template: `
            <div>
                <div>com-B: {{num}}</div>
                <div>
                    <button @click='handle'>点击</button>
                </div>
            </div>
            `,
            methods: {
                handle: function () {
                    hub.$emit('a-event', 2);
                }
            },
            mounted: function () {
                hub.$on('b-event', (val) => {
                    console.log('执行了 b-event');
                    this.num += val;
                });
            },

        });

        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue !'
            },
            methods: {
                handle: function () {
                    hub.$off('b-event');
                    hub.$off('a-event');
                }
            }
        });
    </script>
</body>

</html>